<template>
	<view class="cc-sku-wrap">
		<view class="group">
			<view class="item" v-for="(item, attrId) in innerGoods.sku.attributes" :key="attrId">
				<view class="name">{{item.name}}</view>
				<view class="values">
					<!-- 带有图片的sku -->
					<block v-if="item.type == 2">
						<view @click="toggleSelect(item, index)" :class="['image-value',v.selected?'selected':'']"
							v-for="(v, index) in item.values" :key="index">
							<image :src="v.image" class="image" mode="aspectFill" />
							<view>{{v.value}}</view>
							<view v-if="v.selected" class="badge">
								<uni-icons type="checkmarkempty" size="12" color="#fff"></uni-icons>
							</view>
						</view>
					</block>
					<!-- 普通文本sku -->
					<block v-else>
						<view @click="toggleSelect(item, index)" :class="['text-value',v.selected?'selected':'']"
							v-for="(v, index) in item.values" :key="index">
							{{v.value}}
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="group">
			<view class="item" v-for="(item, addonId) in innerGoods.sku.addons" :key="addonId">
				<view class="name">{{item.name}}</view>
				<view class="values">
					<block v-if="item.type == 2">
						<view @click="toggleSelect(item, index)" :class="['image-value',v.selected?'selected':'']"
							v-for="(v, index) in item.values" :key="index">
							<image :src="v.image" class="image" mode="aspectFill" />
							<view>{{v.value}}</view>
							<view class="number">
								<cc-number :size="30" icon-color="#000" :icon-size="12" primaryColor='#fff'
									borderColor="#fff" shape="circle" />
							</view>
							<view v-if="v.selected" class="badge">
								<uni-icons type="checkmarkempty" size="12" color="#fff"></uni-icons>
							</view>
						</view>
					</block>
					<!-- 普通文本sku -->
					<block v-else>
						<view @click="toggleSelect(item, index)" :class="['long-text-value',v.selected?'selected':'']"
							v-for="(v, index) in item.values" :key="index">
							<view>{{v.value}}</view>
							<view class="number">
								<cc-number :minusPrimary="{
											borderColor: v.selected?'#fff':'#000',
											backgroundColor: v.selected?'#000':'#fff',
											iconColor: v.selected?'#fff':'#000',
											iconSize: 18,
											}"
											:plusPrimary="{
											borderColor: v.selected?'#fff':'#000',
											backgroundColor: v.selected?'#000':'#fff',
											iconColor: v.selected?'#fff':'#000',
											iconSize: 18,
										}" :size="30" :fontColor="v.selected?'#fff':'#000'" />
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deepClone
	} from "@/cc-ui-tools/libs/function/index.js";
	export default {
		name: "cc-sku",
		props: {
			// goods
			goods: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				innerGoods: deepClone(this.goods),
			};
		},
		methods: {
			toggleSelect(item, index) {
				/* 替换 */
				item.values.forEach((res) => {
					/* 修改选中 */
					if (res.selected === true) res.selected = false;
				});

				item.values[index].selected = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/style/var.scss";

	.cc-sku-wrap {
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;

		.group {
			display: flex;
			flex-direction: column;
			gap: 30rpx;

			.item {
				display: flex;
				flex-direction: column;
				gap: 20rpx;

				.name {
					font-size: 26rpx;
					color: #999;
				}

				.values {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					gap: 30rpx;

					.text-value {
						background: #f8f8f8;
						padding: 20rpx 40rpx;
						border-radius: 5rpx;
						font-size: 26rpx;
						min-width: 100rpx;
						text-align: center;

						&.selected {
							background: #000;
							color: #fff;
						}
					}

					.long-text-value {
						flex: 0 0 90%;
						display: flex;
						justify-content: space-between;
						background: #f8f8f8;
						padding: 20rpx 30rpx;
						border-radius: 10rpx;
						font-size: 26rpx;

						&.selected {
							background: #000;
							color: #fff;
						}
					}

					.image-value {
						position: relative;
						border: 1rpx solid #f8f8f8;
						background: #f8f8f8;
						flex: 0 0 20%;
						box-sizing: border-box;
						border-radius: 5rpx;
						font-size: 26rpx;
						min-width: 100rpx;
						text-align: center;
						padding: 20rpx 10rpx;
						margin-right: 10rpx;

						&.selected {
							border: 1rpx solid $uni-primary-color;
						}

						.badge {
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							width: 30rpx;
							height: 30rpx;
							background: $uni-primary-color;
							top: 0rpx;
							right: 0rpx;
							border-bottom-left-radius: 50%;
						}

						.number {
							margin-bottom: -20rpx;
						}

						.image {
							height: 60rpx;
							width: 60rpx;
						}
					}
				}
			}
		}
	}
</style>